import styled from "styled-components";

export const Wrapper = styled.div<{ $indentLevel?: number }>`
  ${({ $indentLevel }) => {
    if (!$indentLevel) return "";
    return `
    &.indent-level-${$indentLevel} { 
      margin-left: ${$indentLevel * 25}px;
    }
    `;
  }}

  font-size: 14px;

  .message-card {
    &__summary {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
      font-size: 12px;

      > * {
        margin-right: 10px;
      }
    }

    &__author {
      display: flex;
      align-items: center;

      &-avatar {
        margin-right: 4px;
      }
    }

    &__action-list {
      display: flex;
      align-items: center;
    }

    &__action {
      display: flex;
      align-items: center;
      transition: 200ms;

      &:hover {
        opacity: 0.8;
      }

      &-text {
        margin-left: 4px;
      }
    }

    &__content {
      background: whitesmoke;
      position: relative;
      max-width: 400px;
      min-width: 100px;
      width: fit-content;
      padding: 4px 10px;
      border-radius: 4px;

      &.holder-for-reply {
        background: lightgoldenrodyellow;
        color: #ffaa23;
      }

      .message-card__action-list {
        position: absolute;
        right: -30px;
        top: 0;
        transform: rotate(-180deg);
      }

      &-quote {
        background: lightgrey;
        border-left: 4px solid gray;
        font-size: 10px;
        padding: 2px 4px;
        margin-bottom: 4px;
      }

      &-wrapper {
        display: flex;

        &__pictures {
          min-width: 100px;
          margin-left: 10px;
          flex-shrink: 0;
        }

        &__text {
          flex-grow: 1;
        }
      }
    }
  }

  .reply-button:hover {
    cursor: pointer;
    color: #1d3ffb;
  }
`;
